<template>
  <div @mouseup="closeAddOpinionFn" class="app-container">
    <div
      class="reviewBox"
      v-if="$route.query.type === '法规' || $route.query.type === '行政法规'"
    >
      <div class="title">
        <h1>{{ title }}</h1>
      </div>

      <ul class="ul">
        <!-- test类是为了触发transformNum数算属性 -->
        <div
          class="liITem"
          @mousedown="downFn(item, $event)"
          :class="{
            test: item.idStr && item.idStr.split((transformNum = item)),
            haveOpinin: item.comment,
          }"
          v-for="(item, index) in contentList"
          :key="index"
          @mouseup="selectFN($event, item)"
        >
          <template v-if="item.type === '1'">
            <div class="contentText" v-for="(t, i) in item.content" :key="i">
              <div class="contentText-title">
                <Reader :obj="item"></Reader>
              </div>
            </div>
            <!-- 添加审核意见对话框 -->
            <span
              :style="{ left: opsitionX + 'px', top: opsitionY + 'px' }"
              class="submitPinion"
              v-show="currentSelect == item.id && item.comment !== true"
              :class="{ selectItem: currentSelect == item.id }"
              @click="isDialogShowFn('新增')"
            >
              添加审核意见
            </span>
          </template>
          <template v-else>
            <el-image
              style="width: 500px"
              :src="item.content"
              :preview-src-list="[item.content]"
            >
            </el-image>
          </template>

          <div class="reason" v-for="o in OpinionFnlist" :key="o.idStr">
            <!-- endItemId 大于 startItemId,失败原因 就插入endItemId 否者 startItemId -->
            <template
              v-if="
                item.id ===
                (o.endItemId.split('_')[1] > o.startItemId.split('_')[1]
                  ? o.endItemId
                  : o.startItemId)
              "
            >
              <div>
                <div class="DefailReason">
                  <h2>失败原因</h2>
                  <span class="updateTime">更新时间{{ o.updatedTime }}</span>
                </div>
                <div class="DefailText">{{ o.opinion }}</div>
                <!-- 如果是审核失败就显示 -->
                <el-button
                  v-if="$route.query.status !== '2'"
                  @click="isDialogShowFn('修改', o)"
                  >修改</el-button
                >
              </div>
            </template>
          </div>
        </div>
      </ul>
    </div>

    <!-- 问答 -->
    <div
      class="reviewBox"
      v-else-if="$route.query.type == '问答'"
      @mouseup="closeAddOpinionFn"
    >
      <h1 class="title">{{ title }}</h1>
      <div class="item" v-for="(item, index) in newData" :key="index">
        <ul v-if="item.english.toLowerCase() === 'background'">
          <h1>{{ item.label }}</h1>
          <p>{{ item.list }}</p>
        </ul>
        <!-- 详细渲染 -->
        <ul v-if="item.english.toLowerCase() === 'answer'">
          <h1>{{ item.label }}</h1>
          <div
            @mousedown="downFn(t, $event)"
            :class="{
              test: t.tag && t.tag.split((transformNum = t)),
              haveOpinin: t.comment,
            }"
            :data-index="t.id"
            v-for="(t, i) in item.list"
            :key="i"
            @mouseup="selectFN($event, t)"
          >
            <template v-if="t.type == '1'">
              <!-- {{ t.content }} -->

              <div class="contentText-title">
                <Reader :obj="t"></Reader>
              </div>

              <!-- 添加审核意见对话框 -->
              <span
                :style="{ left: opsitionX + 'px', top: opsitionY + 'px' }"
                class="submitPinion"
                v-show="currentSelect == t.id && t.comment !== true"
                :class="{
                  selectItem: currentSelect == t.id,
                }"
                @click="isDialogShowFn('新增')"
              >
                添加审核意见
              </span>
            </template>
            <template v-if="t.type == '2'">
              <p>
                <el-image
                  style="width: 500px"
                  :src="t.url"
                  :preview-src-list="[t.url]"
                >
                </el-image>
              </p>
            </template>
            <template v-if="t.type == '3'">
              <a :href="i.url">{{ t.content }}</a>
            </template>

            <div class="reason" v-for="o in OpinionFnlist" :key="o.id">
              <template v-if="t.id == o.endItemId">
                <div>
                  <div class="DefailReason">
                    <h2>失败原因</h2>
                    <span class="updateTime">更新时间{{ o.updatedTime }}</span>
                  </div>
                  <div class="DefailText">{{ o.opinion }}</div>
                  <el-button @click="isDialogShowFn('修改', o)">修改</el-button>
                </div>
              </template>
            </div>
          </div>
        </ul>
      </div>
    </div>
    <!-- 其他 -->
    <div class="reviewBox" v-else @mouseup="closeAddOpinionFn">
      <div class="item" v-for="(item, index) in newData" :key="index">
        <div class="title">
          <h1>{{ title }}</h1>
        </div>

        <!-- 详细渲染 -->
        <ul v-if="item.english.toLowerCase() === 'details'">
          <div
            @mousedown="downFn(t, $event)"
            :class="{
              test: t.tag && t.tag.split((transformNum = t)),
              haveOpinin: t.comment,
            }"
            :data-index="t.id"
            v-for="(t, i) in contentList"
            :key="i"
            @mouseup="selectFN($event, t)"
          >
            <template v-if="t && t.type == '1'">
              <div class="contentText-title">
                <Reader :obj="t"></Reader>
              </div>

              <!-- 添加审核意见对话框 -->
              <span
                :style="{ left: opsitionX + 'px', top: opsitionY + 'px' }"
                class="submitPinion"
                v-show="currentSelect == t.id && t.comment !== true"
                :class="{
                  selectItem: currentSelect == t.id,
                }"
                @click="isDialogShowFn('新增')"
              >
                添加审核意见
              </span>
            </template>
            <template v-if="t.type == '2'">
              <p>
                <el-image
                  style="width: 500px"
                  :src="t.url"
                  :preview-src-list="[t.url]"
                >
                </el-image>
              </p>
            </template>
            <template v-if="t.type == '3'">
              <a :href="i.url">{{ t.content }}</a>
            </template>

            <div class="reason" v-for="o in OpinionFnlist" :key="o.id">
              <template v-if="t.id == o.endItemId">
                <div>
                  <div class="DefailReason">
                    <h2>失败原因</h2>
                    <span class="updateTime">更新时间{{ o.updatedTime }}</span>
                  </div>
                  <div class="DefailText">{{ o.opinion }}</div>
                  <el-button @click="isDialogShowFn('修改', o)">修改</el-button>
                </div>
              </template>
            </div>
          </div>
        </ul>
      </div>
    </div>
    <!-- 添加意见对话框 -->
    <ComDialog
      width="800"
      :title="dialogTittle"
      @EventClose="closeDialogFn"
      :dialogVisible="isDialogShow"
    >
      <el-input
        v-if="dialogTittle === '修改'"
        type="textarea"
        :rows="6"
        placeholder="请输入内容"
        v-model="modifyObj.opinion"
      >
      </el-input>
      <el-input
        v-else
        type="textarea"
        :rows="6"
        placeholder="请输入内容"
        v-model="addOpinion.opinion"
      >
      </el-input>
      <!-- 是否显示回显元素 -->
      <div v-if="dialogTittle === '修改'" class="echoText">
        {{ EchoOpinion }}
      </div>
      <template #footer>
        <el-button @click="isDialogShow = false">取消</el-button>
        <el-button type="primary" @click="addOpinionFn">保存</el-button>
      </template>
    </ComDialog>
    <el-row
      v-if="$route.query.status !== '2'"
      align="middle"
      justify="center"
      type="flex"
    >
      <el-col :span="5">
        <el-button
          v-if="haveOpinion != 0"
          @click="editOpinionStatusFn('2')"
          v-hasPermi="['base:verifyOpinion:edit']"
          >驳回</el-button
        >
        <el-button
          type="primary"
          @click="editOpinionStatusFn('3')"
          v-hasPermi="['base:verifyOpinion:edit']"
          >通过</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ComCard from "../../../components/comCard.vue";
import ComDialog from "../../../components/comDialog.vue";
// 法规的详细
import { getLawInfoApi } from "@/wss/api/doc/law.js";
// 头条的详细
import { getTopInfoApi } from "@/wss/api/doc/top.js";
// 问答
import { getQaInfoApi } from "@/wss/api/doc/qa.js";
// 政策
import { getPolicyInfoApi } from "@/wss/api/doc/policy.js";

import { getDocGetInfoApi } from "@/wss/api/ContentSupervision.js";
// 模块分类
import {
  getDocModuleListApi,
  getDocModuleByTypeApi,
} from "@/wss/api/contentTemplate";

import {
  addOpinionApi,
  editOpinionApi,
  editOpinionStatusApi,
} from "@/wss/api/ContentReview";
import Reader from "../../../components/reader.vue";

export default {
  props: {},
  components: { ComCard, ComDialog, Reader },
  data() {
    return {
      // 意见数组
      OpininArr: "",
      // 修改意见
      modifyObj: {
        id: "",
        opinion: "",
      },

      haveOpininArr: [],
      EchoOpinion: "",
      newData: [],
      // 意见的条数
      haveOpinion: 0,
      testarr: [],
      // 模板标签
      OpinionFnlist: {},
      // 模板参数
      docModuleType: {},
      currentItem: {},
      dialogTittle: "标题有误",

      addOpinion: {
        verifyId: this.$route.query.verifyId,
        docId: this.$route.query.docId,
        opinion: "",
        startItemId: "",
        endItemId: "",
      },
      title: "",
      isDialogShow: false,
      // 标签
      label: "",
      isedit: "",
      // 记录当前定位的配置
      opsitionX: 0,
      opsitionY: 0,
      // 当前选择的id
      currentSelect: "",
      itemDetails: {},
      contentList: [],

      temp: "",
      transformTemp: "",
    };
  },

  methods: {
    // 鼠标按下
    downFn(item, e) {
      // console.log({ e }, "下去");
      if (e.target.nodeName !== "DIV" && e.target.nodeName !== "SPAN") {
        this.$route.query.type === "法规"
          ? (this.addOpinion.startItemId = item.idStr)
          : (this.addOpinion.startItemId = item.id);
      }
    },
    // 鼠标松开时
    selectFN(e, item) {
      if (e.target.nodeName !== "DIV" && e.target.nodeName !== "SPAN") {
        item.idStr
          ? (this.addOpinion.endItemId = item.idStr)
          : (this.addOpinion.endItemId = item.id);
      }
      this.opsitionX = e.x - 200;

      // offsetTop 元素位于定位父元素的高度， e.offsetY鼠标再触发目标的位置
      this.opsitionY = e.target.offsetTop + e.offsetY;

      item.id ? (this.currentSelect = item.id) : "";
    },
    // 关闭添加意见按钮
    closeAddOpinionFn(e) {
      console.log(e);
      if (e.target.tagName != "DIV" && e.target.className !== "ul") {
        console.log(e.target.className);
      } else {
        this.currentSelect = "不显示";
      }
    },
    // 审核
    async editOpinionStatusFn(status) {
      console.clear();
      let data = {
        status,
        id: this.$route.query.verifyId,
        docId: this.$route.query.docId,
        docType: this.$route.query.type,
      };
      let { msg } = await editOpinionStatusApi(data);

      this.$router.back();
      this.$message({
        type: "success",
        message: msg,
      });
    },
    // 添加/修改审核意见
    async addOpinionFn(isEdit, item) {
      let result = "";
      // 判断是某是修改

      if (this.dialogTittle === "修改") {
        result = await editOpinionApi(this.modifyObj);
      } else {
        // let start = this.addOpinion.startItemId?.split("_")[1];
        // let end = this.addOpinion.endItemId?.split("_")[1];
        // let temp = null;
        // 始终让 endItemId 为最大值
        // if (!start < end) {
        //   temp = this.addOpinion.startItemId;
        //   this.addOpinion.startItemId = this.addOpinion.endItemId;
        //   this.addOpinion.endItemId = temp;
        //   temp = null;
        // }
        console.clear();
        console.log(
          { modifyObj: this.modifyObj, addOpinion: this.addOpinion },
          "添加意见给后端的数据 "
        );

        // 防止用户选空
        this.addOpinion.endItemId || this.addOpinion.startItemId
          ? (result = await addOpinionApi([this.addOpinion]))
          : this.$message({
              type: "waring",
              message: "未选中",
            });
      }
      if (result.code === 200) {
        this.$message({
          type: "success",
          message: result.msg,
        });
        this.isDialogShow = false;
      }
      this.haveOpinion = await this.getOpinionFnlist(this, this.contentList)
        .length;
    },
    // 关闭对话框this.contentList
    closeDialogFn() {
      this.isDialogShow = false;
    },
    // 显示对话框
    isDialogShowFn(isedit, o) {
      this.isDialogShow = true;
      console.log(this.addOpinion, "addOpinion");
      this.addOpinion.opinion = "";
      this.modifyObj.opinion = "";
      // 对话框标题显示的是新增还是修改
      this.dialogTittle = isedit;
      if (isedit === "修改") {
        this.EchoOpinion = o.opinion;
        this.modifyObj.id = o.idStr;
      }
    },
    //  内容模版  list
    async getDocModuleListApiMet(type) {
      let result = await getDocModuleListApi();

      if (result.code == 200) {
        result.rows.forEach((item) => {
          item.type == type
            ? (this.docModuleType = {
                type: item.type,
                no: item.no,
              })
            : "";
        });
      }

      this.getDocModuleByTypeApiMet(this.docModuleType);
    },
    //  内容模版 按类型查找
    async getDocModuleByTypeApiMet(typeData) {
      let { code, data } = await getDocModuleByTypeApi(typeData);
      if (code == 200) {
        // // 拼接内容模板的内容
        this.newData = data.map((item) => {
          return {
            label: item.module + "/" + item.english,
            english: item.english,
          };
        });
      }
      console.log("newData", this.newData);
    },
    // 获取数据
    async getDetailFn() {
      try {
        // 获取模块类型
        await this.getDocModuleListApiMet(this.$route.query.type);

        console.log(this.$route.query, "传递过来的对象");
        let { data, code, title } = await getDocGetInfoApi({
          id: this.$route.query.id,
        });
        console.log(data, "datadata");
        let result = null;
        // 获取对应类型的详细数据
        if (code === 200) {
          console.log(this.$route.query.type, "法规");
          switch (this.$route.query.type) {
            case "法则":
              result = await getLawInfoApi({ id: data.esId });
              this.contentList = result.data.info;
              break;
            case "法规":
              result = await getLawInfoApi({ id: data.esId });
              this.contentList = result.data.info;
              break;
            case "法规":
              result = await getLawInfoApi({ id: data.esId });

              this.contentList = result.data.info;
              console.log(result.data, "法规详细");

              break;
            case "行政法规":
              result = await getLawInfoApi({ id: data.esId });
              this.contentList = result.data.info;

              break;
            case "头条":
              result = await getTopInfoApi({ id: data.esId });
              this.contentList = result.data.info;

              break;
            case "问答":
              result = await getQaInfoApi({ id: data.esId });

              // 转换成问答渲染的数据
              this.contentList = result.data.answer;
              this.newData.map((item) => {
                if (item.english === "BACKGROUND") {
                  item.list = result.data.background;
                } else if (item.english === "ANSWER") {
                  item.list = result.data.answer;
                }
                return item;
              });
              // console.log(this.contentList, "问答的详细");
              break;
            case "政策":
              result = await getPolicyInfoApi({ id: data.esId });
              this.contentList = result.data.info;

              break;
            default:
              break;
          }
          console.log(this.contentList, "contentLIst");

          this.title = result.data.title;
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: error,
        });
      }
    },
    // 去重复

    TorepeatFn(data) {
      this.haveOpininArr = [...new Set(data)];
    },
  },
  // 这里的async不可以去了，不然出错
  async mounted() {
    await this.getDetailFn();
    // 获取意见列表 getOpinionFnlist
    this.haveOpinion = (
      await this.getOpinionFnlist(this, this.contentList)
    ).length;
    // haveOpinion  是否有意见，有就显示驳回
    console.log(this.haveOpinion);
    this.label = this.$route.query.label;
  },
};
</script>

<style lang="scss"  scoped >
.app-container {
  background-color: #f5f5f5;
  padding: 20px;
  .reviewBox {
    padding: 20px;
    background-color: #ffff;
  }

  .title {
    text-align: center;
    font-family: "MicrosoftYaHei", "Microsoft YaHei";
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #e37709;
  }
  .contentText-title {
    margin-bottom: 30px;
  }

  ul {
    padding: 0px;
    position: relative;
  }

  .selectItem {
    cursor: pointer;
    position: absolute;
    left: 0px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: black;
    height: 50px;
    width: 100px;
    text-align: center;
    line-height: 50px;
  }
  .div {
    margin: 10px 0px;
  }

  .el-row {
    margin-bottom: 20px;
    height: 100px;
    background-color: white;
  }
  .echoText {
    margin-top: 30px;
    background: #cccc;
    padding: 30px;
  }
  .submitPinion {
    font-weight: 400;
    font-size: 13px;
    height: 80px;
    color: white;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    background-color: black;
    position: absolute;
    width: 200px;
    z-index: 99;
    line-height: 80px;
  }
  .reason {
    background-color: #f5f5f5;
  }
  .DefailReason {
    align-items: center;
    display: flex;

    .updateTime {
      margin-left: 20px;
    }
  }
  .DefailText {
    min-height: 50px;
  }
}
.echoText {
  margin-top: 30px;
  background: #cccc;
  padding: 30px;
}
.submitPinion {
  font-weight: 400;
  font-size: 13px;
  height: 80px;
  color: white;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  background-color: black;
  position: absolute;
  width: 200px;
  z-index: 99;
  line-height: 80px;
}
.reason {
  background-color: #f5f5f5;
}
.DefailReason {
  align-items: center;
  display: flex;

  .updateTime {
    margin-left: 20px;
  }
}
.DefailText {
  min-height: 50px;
}
</style>